<template>
    <el-dialog v-model="visible" title="创建访问令牌" width="500px">
    
        <el-form-item label="访问令牌过期时间" prop="expire">
            
        <el-date-picker
            v-model="expire"
            type="date"
            placeholder="永久"
            :disabled-date="disabledDate"/>

        </el-form-item>
        <el-button type="primary" @click="saveApikey">保存</el-button>
        <el-button @click="visible = false">取消</el-button>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

const visible = ref(false)
const props = defineProps({modelValue: Boolean})
const emit = defineEmits(['update:modelValue'])
const expire = ref(null)

watch(() => props.modelValue, (val) => {
   visible.value = val
})

watch(visible, (val) => {
    emit('update:modelValue', val)
})

const disabledDate = (time: Date) => {
    return time.getTime() < Date.now()
}

const saveApikey = () => {
    visible.value = false
}
</script>

<style>
</style>
